<template>
	<div>
		<Upload ref="upload"
				:action="`${baseURL}/upload_file`" multiple
				:before-upload="beforeUpload"
				:on-success="handleSuccess"
				:on-error="handleError"
				:show-upload-list="false"
		>
			<!--<Upload action="" multiple>-->
			<Button icon="iso-cloud-upload-outline">Upload Files</Button>
		</Upload>
		<!--分步提交-->
		<Button @click="handleUpload">上传</Button>
		<Table :columns="columns" :data="fileList"></Table>
		<Modal v-model="showModal">
			<div style="height: 300px; overflow: auto">{{ content }}</div>
		</Modal>
	</div>
</template>

<script>
	import {baseURL} from '../config';
	import {getUploadFileList} from '../api/data';

	export default {
		data() {
			return {
				baseURL,
				file: {},
				showModal:false,
				content:'',
				columns: [
					{title: '文件key', key: 'key'},
					{title: '文件名', key: 'file_name'},
					{title: '文件类型', key: 'file_type'},
					{title: '文件大小', key: 'file_size'},
					{title: '上传时间', key: 'createAt'},
					{
						title: '存储有效期',
						key: 'storage_time',
						render: (h, {row}) => {
							return (
								<span>{row.storage_time===''?'永久':row.storage_time}</span>
							)
						}
					},
					{
						title: '操作',
						key: 'handle',
						render: (h, {row}) => {
							return (
								<span>
									<i-button on-click={this.download.bind(this,row.key)}>下载</i-button>
									<i-button disabled={!row.file_type.includes('text')} on-click={this.showFileContent.bind(this, row.key)}>显示内容</i-button>
									<i-button on-click={this.deleteFile.bind(this, row.index)}>删除</i-button>
								</span>
							)
						}
					}
				],
				fileList: []
			}
		},
		methods: {
			handleUpload() {
				this.$refs.upload.post(this.file);
			},
			beforeUpload(file) {
				this.file = file;
				// 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传
				return false;
			},
			handleSuccess() {
				this.$Message.success('upload file success');
			},
			handleError() {
				this.$Message.error('upload file error');
			},
			download(key) {
				/*downloadFile({
					url: `${baseURL}/upload_file`,
					params: {
						key, type: 'download'
					}
				})*/
				this.$Message.info('start download file');
			},
			showFileContent(key) {
				/*getFile({key, type: 'text'}).then(res => {
					console.log(res);
					this.showModal=true;
				});*/
				this.content = 'file content';
				this.showModal = true;
			},
			deleteFile(index) {
				this.fileList.splice(index, 1);
			}
		},
		mounted() {
			getUploadFileList().then(res => {
				this.fileList = res.data;
			});
		}
	}
</script>

